<template>
  <div id="app">
    <div class="main">
      <router-view></router-view>
    </div>
    <mt-tabbar :fixed="true" v-model="selected">
      <mt-tab-item id="首页" @click.native="sTo({ name: 'HelloWorld'})">
        <i slot="icon" class="fa fa-home"></i>
        首页
      </mt-tab-item>
      <mt-tab-item id="购物车" @click.native="sTo({ name: 'shop-ui'})">
        <i slot="icon" class="fa fa-university"></i>
        购物车
        <mt-badge size="small" type="success">{{badge}}</mt-badge>
      </mt-tab-item>
      <mt-tab-item id="个人中心" @click.native="sToo()">
        <i slot="icon" class="fa fa-address-book"></i>
        个人中心
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
import cookie from 'js-cookie';
import { getAllGoods } from './services/product_type';

export default {
  name: "app",
  data() {
    return {
      selected: "首页",
      badge: '',
    };
  },
  methods: {
    sTo(data) {
      this.$router.push(data);
    },
    sToo() {
      console.log(cookie.get('userName'));
      const userName = cookie.get('userName');
      if(userName) {
        console.log('aaaaaaaaa')
        this.$router.push({ name: 'mp'});
      } else {
        this.$router.push({ name: 'login'})
      }
    }
  },
  created() {
    this.$eventBus.$on('addToShopCart', (data) => {
      this.badge += 1;
    });
    this.$eventBus.$on('reduceShopCart', (data) => {
      this.badge = this.badge - data;
    })
    getAllGoods({
      userName: cookie.get('userName'),
    }).then( res => {
      this.badge = res.data.all;
    }).catch( err => {
      console.log(err);
    })
  }
};
</script>

<style>
.main{
  margin-bottom: 80px;
}
</style>
